<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="header">
              <div class="searchInput">
            <el-form ref="form" :model="query" label-width="80px">
          <el-form-item label="关键字">
            <el-input v-model="query.keyword" ></el-input>
          </el-form-item>
            </el-form>
      </div>
      <div class="searchbtn">
        <el-button size="mini" @click="rebtn">清除</el-button>
        <el-button size="mini" type="primary" @click="searbtn">搜索</el-button>
      </div>

      </div>
      <!-- 提示 -->
      <el-alert
        show-icon
        title="数据一共178条"
        type="info"
        >
      </el-alert>
      <!-- 表格 -->
      <el-table
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column
        prop="id"
        label="编号"
        width="280">
      </el-table-column>
      <el-table-column
        label="题型"
        width="180"
        >
        <template slot-scope="scope">
          <div v-if="scope.row.questionType==='1'">简答</div>
          <div v-else-if="scope.row.questionType==='2'">单选</div>
          <div v-else>多选</div>

        </template>
      </el-table-column>
      <el-table-column
        label="题目编号"
        width="240"
        >
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.questionIDs" :key="index" class="color_blue" @click="quebtn(scope.row.id)">
            {{item.number}}
          </div>
        </template>
      </el-table-column>
        <el-table-column
        prop="addTime"
        label="录入时间"
        width="260"
        >
      </el-table-column>
      <el-table-column
        prop="totalSeconds"
        label="答题时间"
        width="180"
        >
      </el-table-column>
      <el-table-column
        prop="accuracyRate"
        label="正确率"
        width="180"
        >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="录入人"
        width="180"
        >
      </el-table-column>
      <el-table-column
        label="操作"
        >
         <template slot-scope="scope">
           <el-button type="danger" icon="el-icon-delete" circle plain @click="removebtn(scope.row.id)"></el-button>
          </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="query.pagesize"
      layout="total, prev, pager, sizes, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    </el-card>
  </div>
</template>

<script>
// 主题列表
import { randoms, removeRandoms } from '../../api/hmmm/questions'
export default {
  data () {
    return {
      query: {
        keyword: '',
        page: 1,
        pagesize: 10

      },

      // 主题列表数据
      tableData: [],
      total: 0
    }
  },
  created () {
    this.getrandoms()
  },
  methods: {
    // 主题列表数据
    async getrandoms () {
      const { data: res } = await randoms(this.query)
      this.total = res.counts
      this.tableData = res.items
      // const questionsId = this.tableData.map(v => (v.questionIDs.map(n => n.number)))
      // console.log(questionsId)
      // this.tableData.map(v => {
      //   questionsId.forEach(n => { v.question = n })
      // })
    },
    handleSizeChange (e) {
      this.query.pagesize = e
      this.getrandoms()
    },
    handleCurrentChange (e) {
      this.query.page = e
      this.getrandoms()
    },
    removebtn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id })
        this.getrandoms()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    quebtn (id) {
      this.$message('数据正在路上')
    },
    searbtn () {
      this.query.page = 1
      this.getrandoms()
      // this.pagesize = 999
      // this.getrandoms()
      // const reg = new RegExp(this.form.name, 'g')
      // const search = this.tableData.filter(v => v.id.substr(1).match(reg))
      // this.tableData = search
    },
    rebtn () {
      this.query.keyword = ''
      this.getrandoms()
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  .header{
    display: flex;
    justify-content: space-between;
    /deep/ .el-input{
      width: 360px;
    }
  }
  .pagination {
    text-align: right;
    margin-top: 15px;
    margin-right: 15px;
  }
}
.color_blue {
  color: skyblue;
  cursor: pointer;
}
</style>
